<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选/不选</title>
</head>

<body>
    <form action="" method="post">
        你喜欢的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
        <br>
        <input type="checkbox" name="items" id="足球" />足球
        <input type="checkbox" name="items" id="篮球" />篮球
        <input type="checkbox" name="items" id="羽毛球" />羽毛球
        <input type="checkbox" name="items" id="乒乓球" />乒乓球
        <br>
        <input type="button" id="checkAllBtn" value="全  选" />
        <input type="button" id="checkNoBtn" value="全不选" />
        <input type="button" id="checkRevBtn" value="反  选" />
        <input type="button" id="sendBtn" value="提  交" />
    </form>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        var $checkedAllBox = $('#checkedAllBox');
        var $items = $(':checkbox[name=items]');

        //全选
        $('#checkAllBtn').click(function () {
            $items.prop('checked', true);
            $checkedAllBox.prop('checked', true);
        });

        //全不选
        $('#checkNoBtn').click(function () {
            $items.prop('checked', false);
            $checkedAllBox.prop('checked', false);
        });

        //反选
        $('#checkRevBtn').click(function () {
            $items.each(function () {
                this.checked = !this.checked;
            })
            // $items.filter(':not(:checked)').length===0;
            $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length === 0);
        })

        $('#sendBtn').click(function () {
            $items.filter(':checked').each(function () {
                alert(this.value);
            })
        })
        $('checkedAllBox').click(function(){
            $items.prop('checked',this.checked);
        })
        $('checkedAllBox').click(function(){
            $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
        })
    </script>
</body>

</html>